<template>
  <view class="user_name_block">
    <view class="user_name_bg"></view>
    <view class="user_name" v-if="value">
      <!-- #ifndef MP-WEIXIN -->
      <u-avatar
        size="98"
        src="http://img.druglots.cn/image/avatar_m.png"
      ></u-avatar>
      <!-- #endif -->

      <!-- #ifdef MP-WEIXIN -->
      <view class="header_img">
        <open-data
          style="width: 98rpx; height: 98rpx"
          type="userAvatarUrl"
        ></open-data>
      </view>
      <!-- #endif -->
      <view class="user_info" @click="setname('/pages/user/settings/setUserName?nickName=' + value.nickname)">
        <view class="name">{{
          value.nickname || $t('locales.pleaseSetNickname')
        }}</view>
        <view class="label">
          <image
            v-if="isChinese"
            class="label_img"
            src="@/static/iconImg/certified.png"
          ></image>
          <image
            v-else
            class="label_img"
            src="@/static/iconImg/certified_en.png"
          />
          <!-- <image
						class="label_img"
						src="@/static/iconImg/real_name.png"
					></image>
					<image
						class="label_img"
						src="@/static/iconImg/no_real_name.png"
					></image> -->
        </view>
      </view>
    </view>
    <view class="user_name login" v-else>
      <u-button
        type="primary"
        size="medium"
        plain
        @click="navSwitch('/pages/user/login/index')"
      >
        {{ $t('locales.isLogin') }}
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    i18n() {
      return this.$t('locales')
    }
  },
  props: {
    value: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {}
  },
  computed: {
    isChinese() {
      return this._i18n.locale === 'zh'
    }
  },

  onLoad() {
    uni.login({
      provider: 'weixin',
      success: (loginRes) => {
        console.log(loginRes)
        // 获取用户信息
        uni.getUserInfo({
          provider: 'weixin',
          success: (infoRes) => {
            console.log(infoRes)
          }
        })
      }
    })
  },

  methods: {
    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },
    setname(url) {
      uni.navigateTo({
        url
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.user_name_block {
  width: 100%;
  height: 300rpx;
  position: relative;
  background-color: #ffffff;
  .user_name_bg {
    position: absolute;
    background-color: $theme-color;
    width: 100%;
    height: 204rpx;
    left: 0;
    top: 0;
  }
  .user_name {
    position: absolute;
    width: 670rpx;
    height: 220rpx;
    left: 40rpx;
    top: 40rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    padding: 0 60rpx;
    box-sizing: border-box;
    box-shadow: 0px 0px 45rpx $theme-color;
    background-image: url(../../static/images/user_name_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .header_img {
      width: 98rpx;
      height: 98rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .user_info {
      height: 98rpx;
      flex: 1;
      margin-left: 35rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .name {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        @include overText(400rpx, block);
      }
      .label {
        display: flex;
        .label_img {
          width: 100rpx;
          height: 32rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
  .login {
    justify-content: center;
  }
}
</style>
